<template>
  <view 
    class="fu-list-item"
    :class="[
      { 'fu-list-item--border': list.border },
      { 'fu-list-item--clickable': clickable },
      { 'fu-list-item--disabled': disabled }
    ]"
    @click="onClick"
  >
    <!-- 左侧图标 -->
    <view v-if="icon || $slots.icon" class="fu-list-item__icon">
      <slot name="icon">
        <fu-icon v-if="icon" :name="icon" />
      </slot>
    </view>
    
    <!-- 主要内容 -->
    <view class="fu-list-item__content">
      <!-- 标题 -->
      <view class="fu-list-item__title">
        <slot name="title">{{ title }}</slot>
      </view>
      
      <!-- 描述文本 -->
      <view v-if="desc || $slots.desc" class="fu-list-item__desc">
        <slot name="desc">{{ desc }}</slot>
      </view>
    </view>
    
    <!-- 右侧内容 -->
    <view v-if="$slots.right" class="fu-list-item__right">
      <slot name="right"></slot>
    </view>
    
    <!-- 右侧箭头 -->
    <fu-icon 
      v-if="arrow"
      name="arrow-right"
    />
  </view>
</template>

<script>
/**
 * fu-list-item 列表项组件
 * @description 列表项
 * @property {String} title - 标题
 * @property {String} desc - 描述文本
 * @property {String} icon - 左侧图标
 * @property {Boolean} arrow - 是否显示右侧箭头
 * @property {Boolean} clickable - 是否可点击
 * @property {Boolean} disabled - 是否禁用
 * @event {Function} click - 点击时触发
 */
export default {
  name: 'fu-list-item',
  inject: ['list'],
  props: {
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    arrow: {
      type: Boolean,
      default: false
    },
    clickable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  methods: {
    onClick(event) {
      if (!this.disabled && this.clickable) {
        this.$emit('click', event)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-list-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background-color: #fff;
  
  &--border {
    &::after {
      content: '';
      position: absolute;
      left: 32rpx;
      right: 32rpx;
      bottom: 0;
      height: 2rpx;
      background-color: var(--fu-border-color);
      transform: scaleY(0.5);
    }
    
    &:last-child::after {
      display: none;
    }
  }
  
  &--clickable {
    cursor: pointer;
    
    &:active {
      background-color: #f5f5f5;
    }
  }
  
  &--disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  &__icon {
    margin-right: 20rpx;
    
    .fu-icon {
      font-family: 'fuIcon';
      font-size: 40rpx;
      color: var(--fu-text-color-secondary);
    }
  }
  
  &__content {
    flex: 1;
    min-width: 0;
  }
  
  &__title {
    font-size: 28rpx;
    line-height: 1.5;
    color: var(--fu-text-color);
  }
  
  &__desc {
    margin-top: 8rpx;
    font-size: 24rpx;
    line-height: 1.5;
    color: var(--fu-text-color-secondary);
  }
  
  &__right {
    margin-left: 20rpx;
  }
  
  &__arrow {
    font-family: 'fuIcon';
    font-size: 32rpx;
    margin-left: 12rpx;
    color: var(--fu-text-color-secondary);
  }
}
</style> 